CSS: display
displayで要素の形態を決定する
CSSの基礎なので、ここの理解が曖昧だと、全てのCSSを雰囲気でやることになるmrsekut.icon
displayに何を指定するかによって、
height/widthや、margin/paddingや、text-alignなどを指定できるかどうか変わる
CSSでの要素の幅の指定の仕方が変わる
CSS: displayのinline/blockは、Content Modelとは関係がないことに注意
mdn
Outside ref
「Outside」というか「自分自身」と言った方がわかりやすくない？mrsekut.icon
指定した要素自身のdisplayを変更する
display: block
display: inline
Inside ref
子要素の扱いが変わる
自分自身がblock/inlineになるかは指定したものによって異なる
flex
CSS: Flexbox
自分自身はblock-level elementになる
grid
Grid Layout
自分自身はblock-level elementになる
display: flow
display: flow-root
display: table
display: ruby
自分自身はinline-level elementになる
Box ref
display: contents
display: none
非表示にする
List Item ref
いろいろ
Internal ref
いろいろ
Precomposed ref
CSS 2時代のものらしい
これって、「今は非推奨」みたいなニュアンスは含まれるのだろうか #??
inline-block
inline-block要素になる
etc.
display: block flow;のように2値を指定する構文もある
が、これはCSS 2時代のものなので、今は使わないっぽい
https://gyazo.com/ce701f4ad54455cba533bd91f135f1d1 https://saruwakakun.com/html-css/basic/display#section1
これ、図は一覧できてよいが、記事の内容は少しおかしいmrsekut.icon
inline-blockの使いみちは無理やり出してる感じがある
横並びにするためにわざわざinline-block使わないだろう
普通はblockとflexでやる
各htmlタグのdefaultがどれなのかを抑える
block
p、div、ul、h1〜h6
inline
a、span、img
inline-block
none
#??
できれば、これらのdefaultがこれである理由を知りたいmrsekut.icon
https://coliss.com/articles/build-websites/operation/css/multiple-values-of-the-display-property.html
2つ同時に指定できるやつ
display: block flex;みたいに